<template>
    <li v-for="(item, index) in datas" :key="item.id">
        <input type="checkbox" v-model="item.isChecked">
        <span>{{ item.goodName }}</span>
        <button class="btn" @click="item.count = item.count > 1 ? item.count - 1 : 1">-</button>
        <input type="text" class="input" v-model="item.count">
        <button class="btn" @click="item.count++">+</button>
        <span>{{ item.price }}</span>
        <span>{{ item.count * item.price }}</span>
        <span @click="del(index)">删除</span>
    </li>
</template>

<script setup>
import { ref } from 'vue'
import emitter from '../eventBus.js'
const datas = ref([])
// 接受datas数据
emitter.on('datasContent', (data) => {
    datas.value = data.value
})
// 删除单个商品
const del = (index) => {
    datas.value.splice(index, 1)
}
</script>

<style>
li {
    display: flex;
    justify-content: space-between;
}

.input {
    width: 20px;
}

.btn {
    width: 20px;
}
</style>